<template>
  <div>
    <!--    <img :src="src1">-->
    <div style="text-align:left">
      <!-- <el-input v-model="tableDataName" size="small" placeholder="请输入姓名" style="width:240px"></el-input>
      <el-button type="primary" size="small" @click="searchUser">搜索</el-button> -->
      <!-- <el-button type="primary" size="small" @click="openData">展示数据</el-button> -->
      <!--      <el-button type="success" size="small" @click="addRow(brand)">新增</el-button>-->
      <!-- <el-button type="success" size="small" @click="handleAdd()">新增</el-button> -->
      <!--      <el-button type="primary" size="small" @click="removebrand()">批量删除</el-button>-->
    </div>
    <div>
      <el-table :data="brand.slice((currentPage-1)*pageSize,currentPage*pageSize)" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
        <el-table-column type="selection" width="60">
        </el-table-column>
        <el-table-column type="index" width="30">
        </el-table-column>
        <el-table-column prop="turnoverId"  label="编号" width="40" sortable>
        </el-table-column>
        <!--        <el-table-column prop="apply"  label="采购单编号" width="40" sortable>-->
        <!--        </el-table-column>-->
        <el-table-column prop="turnover"  label="收支金额" width="140" sortable>
        </el-table-column>
        <el-table-column prop="expected_turnover"  label="预期收支" width="140" sortable>
        </el-table-column>
        <el-table-column prop="unexpected_status"  label="意外原因" width="120" sortable>
        </el-table-column>
        <el-table-column prop="turnover_type"  label="收支类型" width="90" sortable>
        </el-table-column>
        <el-table-column prop="name"  label="审核员工" width="160" sortable>
        </el-table-column>
        <el-table-column prop="turnover_date"  label="收支时间" width="90" sortable>
        </el-table-column>

        <el-table-column prop="status"  label="收支类型" width="90" sortable>
        </el-table-column>
<!--        <el-table-column prop="status"  label="收支类型" width="90" sortable>-->
<!--          <span v-if="scope.row.state==='-'" style="color:blue">支出</span>-->
<!--          <span v-if="scope.row.state==='+'" style="color:orangered">收入</span>-->
<!--        </el-table-column>-->


      </el-table>
      <el-pagination align='center'
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[1,5,10,20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="brand.length">
      </el-pagination>
    </div>
    <!--新增/编辑界面-->
    <el-dialog :title="titleMap[dialogStatus]" :visible.sync="FormVisible" :close-on-click-modal="false" class="edit-form"
               :before-close="handleClose">
      <el-form :model="Form" label-width="80px" :rules="editFormRules" ref="Form">
        <el-form-item label="编号" prop="id" hidden>
          <el-input v-model="Form.id" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单用户" prop="f_user">
          <el-select v-model="Form.f_user" placeholder="请选择"  value-key="book" disabled>
            <el-option
              v-for="item in books"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <!--        <el-form-item label="采购员" prop="uid" >-->
        <!--          <el-select v-model="Form.uid" placeholder="请选择"  value-key="uid" disabled>-->
        <!--            <el-option-->
        <!--              v-for="item in buyer"-->
        <!--              :key="item.uid"-->
        <!--              :label="item.name"-->
        <!--              :value="item.uid">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="审核员" prop="aid">-->
        <!--          <el-select v-model="Form.aid" placeholder="请选择"  value-key="aid" disabled>-->
        <!--            <el-option-->
        <!--              v-for="item in approve"-->
        <!--              :key="item.uid"-->
        <!--              :label="item.name"-->
        <!--              :value="item.uid">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="预计采购数量" prop="quantity">-->
        <!--          <el-input v-model="Form.quantity" auto-complete="off" disabled></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="预计采购单价" prop="price">-->
        <!--          <el-input v-model="Form.price" auto-complete="off" disabled></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="预计采购总价" prop="budget">-->
        <!--          <el-input v-model="Form.budget" auto-complete="off" disabled></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="状态" prop="state">
          <el-select v-model="Form.state" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单编号" prop="parcelid" >
          <el-input v-model="Form.parcelid" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="time" >
          <el-form-item label="选择日期" :picker-options="pickerOptions">
            <div>
              <el-date-picker v-model="Form.time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                              value-format="yyyy-MM-dd" disabled="disabled"></el-date-picker>
            </div>
          </el-form-item>
        </el-form-item>
        <el-form-item label="支付总金额" prop="price" >
          <el-input v-model="Form.price" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="支付时间" prop="date" >
          <el-form-item label="选择日期" :picker-options="pickerOptions">
            <div>
              <el-date-picker v-model="Form.date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                              value-format="yyyy-MM-dd" disabled="disabled"></el-date-picker>
            </div>
          </el-form-item>
        </el-form-item>
        <el-form-item label="收货地址编号" prop="f_site" >
          <el-input v-model="Form.f_site" auto-complete="off" disabled></el-input>
        </el-form-item>

        <!--        <el-form-item label="实际采购价格" prop="realityprice">-->
        <!--          <el-input v-model="Form.realityprice" auto-complete="off"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="实际采购总价格" prop="realitytotal" >-->
        <!--          <el-input v-model="Form.realitytotal" auto-complete="off"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="采购单创建时间" prop="time">-->

        <!--          <el-form-item label="" :picker-options="pickerOptions" disabled="disabled">-->
        <!--            <div>-->
        <!--              <el-date-picker v-model="Form.time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"-->
        <!--                              value-format="yyyy-MM-dd"></el-date-picker>-->
        <!--            </div>-->
        <!--          </el-form-item>-->
        <!--        </el-form-item>-->
        <el-form-item label="收货时间" prop="datetime">

          <el-form-item label="选择日期" :picker-options="pickerOptions">
            <div>
              <el-date-picker v-model="Form.datetime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                              value-format="yyyy-MM-dd"></el-date-picker>
            </div>
          </el-form-item>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="handleCancel('Form')">取消</el-button>
        <el-button v-if="addBtnshow" type="primary" @click.native="confirmAdd('Form')">确定</el-button>
        <el-button v-if="editBtnshow" type="primary" @click.native="confirmEdit('Form')">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
var _index;
export default {
  name: 'TurnoverManger',
  data() {
    return {
      addForm: {
        image: ''
      },
      rules: {
        image: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ]
      },

      src1: require('../../assets/微信图片_20210731215732.jpg'),

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },

      options: [
        {
          value: '0',
          label: '暂不发货'
        },
        {
          value: '1',
          label: '发货'
        }],


      currentPage:1,
      pageSize:5,
      titleMap: {
        addEquipment:'新增',
        editEquipment: "编辑"
      },
      //新增和编辑弹框标题
      // dialogStatus: "",
      Form: {
        turnoverId: '',
        turnover: '',
        expectedTurnover:'',
        unexpectedStatus:'',
        turnoverType:'',
        financialStaff:'',
        turnoverDate:'',
        status:'',
      },

      brand:[
      ],
      buyer: {
        uid:'',
        name:''
      },
      approve: {
        uid:'',
        name:''
      },
      books:{
        id:'',
        name:''
      },

      editFormRules:{
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        reserve: [
          { required: true, message: '请输入商品库存', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入商品描述', trigger: 'blur' }
        ],
      },
      FormVisible: false,
      currentRow:[],
      ids:[],
      listLoading:'',
      addBtnshow:false,
      editBtnshow:false,
      editLoading:'',
      dialogStatus: '',
      selected:[],
      editid:'',
      searchForm:[]
    }
  },
  created() {
    this.$http.post('/turnover/selects').then(data=>{
      console.log(data);
      this.brand = data;
    });
    this.$http.post('/applydate/selectBuyer').then(data=>{
      console.log(data);
      this.buyer = data;
    });
    this.$http.post('/applydate/selectAuditor').then(data=>{
      console.log(data);
      this.approve = data;
    });
    this.$http.post('/fuser/select').then(data=>{
      console.log(data);
      this.books = data;
    });

  },
  methods: {
    handleChange(file, fileList) {
      this.addForm.image = URL.createObjectURL(file.raw)
      // var files = this.addForm.image
      // files.push(this.addForm.image)
    },
    beforeupload(file) {
      return true
    },
    submitForms(addForm) { // 新增表单提交
      this.axios({
        method: 'post',
        url: 'url',
        headers: { Authorization: window.sessionStorage.getItem('token') },
        data: { }
      })
        .then(res => {
          this.$refs[addForm].validate((valid) => {
            if (valid) {
              this.$refs.upload.submit()
              // 不可缺少
            } else {
              console.log('error submit!!')
              return false
            }
          })
        })
        .catch(function(error) {
          console.log(error)
        })
    },

    selsChange: function (val) {  //点击选中
      console.log(val);
      this.selected = val;
    },
    // 点击新增
    addRow (brand, event) {
      this.FormVisible = true;
      this.Form = {
        id: 0,
        name: '',
        price: 0,
        date: '',
      };

      this.dialogStatus = "addEquipment"
      this.addBtnshow = true
      this.editBtnshow = false

    },
    // 点击确定（新增）
    confirmAdd () {

      // this.book.push({
      //   name: this.Form.name,
      //   price: this.Form.price,
      //   reserve: this.Form.reserve,
      //   data: this.Form.data,
      //   desc: this.Form.desc
      // })

      this.$http.post("/forder/insert", this.Form).then(add => {
        //alert(add);
        if (add > 0) {
          alert("添加成功");
          window.location.reload();
        } else {
          alert("添加失败")
        }
      })
      this.FormVisible = false;
    },
    //点击编辑
    handleEdit: function (index, row) {
      this.FormVisible = true;
      this.Form = Object.assign({}, row); //这句是关键！！！
      _index = index;
      console.log(index);
      console.log(_index);

      this.dialogStatus = "editEquipment"
      this.addBtnshow = false
      this.editBtnshow = true
    },
    // 点击确定（编辑）
    confirmEdit () {
      //alert( this.Form.state);
      this.$http.post("/forder/update", this.Form).then(add => {
        alert("发货成功");
        window.location.reload();
      });
    },
    //点击关闭dialog
    handleClose (done) {
      //  done();
      //  location.reload();
      this.FormVisible = false;
    },
    //点击取消
    handleCancel (formName) {
      this.FormVisible = false;
    },
    // 删除
    handleDelete (index, rows) {

      // console.log(index, row);
      this.Form.id = rows
      // alert(this.Form.id);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("/forder/delete", this.Form).then(add => {
          if (add > 0) {
            type: 'success';
            message: '删除成功!';
            window.location.reload();
          } else {
            alert("修改失败")
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    removebrand () {
      this.$confirm('此操作将永久删除 ' + this.selected.length + ' 条数据, 是否继续?', '提示', {type: 'warning'})
        .then(() => {
          console.log(this.selected);
          var ids = [];
          //提取选中项的id
          $.each(this.selected, (i, brand) => {
            ids.push(brand.id);
          });
          // 向请求服务端删除
          //  var resource = this.$resource(this.url);
          resource.remove({ids: ids.join(",")})
            .then((response) => {
              this.$message.success('删除了' + this.selected.length + '个用户!');
              this.getbrand();
            })
            .catch((response) => {
              this.$message.error('删除失败!');
            });
        })
        .catch(() => {
          this.$Message('已取消操作!');
        });
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    stateFormat (row, column, cellValue) {
      // console.log(row , column , cellValue)
      if (!cellValue) return "";
      if (cellValue.length > 40) {
        //最长固定显示4个字符
        return cellValue.slice(0, 40) + "...";
      }
      return cellValue;
    },
    clickContent: function (row, column, cell, event) {
      clickContent(row, column, cell, event)
      {
        if (column.label === '数据内容') {  // 只有点击数据内容列时才会展开
          row.flag = !row.flag  // 这个参数是当时将数据存储到表格中时特意加上控制表格的展开和省略的
        }
      }
    }

  },
}
</script>
<style>

</style>
